<!-- 支付商品页面 -->
<template>
    <div style="height: 800px;">
        <el-row style="background-color: white;width: 96%;margin-left: 90px;margin-top: 20px;padding: 20px;">
            <img :src="reccourselData.courseCover" style="width: 400px;" />
            <div style="margin-left: 30px;width: 650px">
                <h3>
                    <span style="font-weight: bold; ;">{{ reccourselData.courseName }}</span>
                </h3>
                <h3 style="height: 20px;">
                    <p style="color: rgb(204, 0, 0);  margin-left: 450px; font-size: 25px;">￥{{ reccourselData.courseCPrice
                    }}</p>
                </h3>
                <br />
                <h3>
                    <p
                        style="color: rgb(102, 102, 102); margin-left: 450px; font-size: 15px;text-decoration: line-through;">
                        ￥{{ reccourselData.courseOPrice }}</p>
                </h3>


            </div>
            <div style="float: left;margin-left: 80px; margin-top: 30px;">
                <p style="margin-left: -70px; font-size: 20px;">支付方式</p>
                <p><el-button type="success" style="margin-left: -70px;margin-top: 15px;">微信支付</el-button></p>
                <p style="font-size: 12px;color: rgb(210, 42, 42);margin-left: -70px;margin-top: 20px;">请在30分钟内完成支付</p>
            </div>
            <div>
                <h4 style="margin-left: 750px;margin-top: 160px;">需支付<span style="color: rgb(204, 0, 0);">￥{{
                    reccourselData.courseCPrice }}</span></h4>
                <el-button type="success" style="width: 100px;margin-left: 750px;margin-top: 20px;"
                    @click="paygood(reccourselData.courseId)">支付</el-button>
            </div>
        </el-row>
    </div>
</template>
<script>
import { ref, reactive, onMounted } from 'vue'
import axios from '../../api/index';

import { ElMessage } from "element-plus";
import { useRoute, useRouter } from 'vue-router';


export default {
    setup() {

        const route = useRoute();
        const router = useRouter();
        let token = localStorage.getItem('token');
        let longtoken = localStorage.getItem('longtoken');
        const reccourselData = ref({});
        const itemId = route.params.productId
        // 从localStorage中获取存储的JSON字符串  
        var userInfoJsonString = localStorage.getItem('userInfo');

        // 确保userInfoJsonString不是null，如果是null，那么将其设置为空字符串  
        if (userInfoJsonString === null) {
            userInfoJsonString = "{}";
        }
        // 解析JSON字符串为JavaScript对象  
        var userInfo = JSON.parse(userInfoJsonString);

        onMounted(async () => {
            try {
                //发起请求
                axios.get('/course/findById', {
                    params: {
                        userId: userInfo.id,
                        courseId: itemId
                    },
                    headers: {
                        token: token,
                        longtoken: longtoken
                    }
                }).then(response => {
                    if (response.code === 200) {
                        console.log(response.data);
                        reccourselData.value = response.data;
                    }
                })
            } catch (error) {
                ElMessage.error("臣妾未能请求到数据，给客官赔罪啦~~");
            }
        })
        function paygood(goodid) {
            //发起请求查看是否有该用户与该课程的等待状态下订单，有的话给出提示，不能创建订单，没有的话再创建订单
            axios.get('/order/findPayState', {
                params: {
                    userId: userInfo.id,
                    goodId: itemId
                },
                headers: {
                    token: token,
                    longtoken: longtoken
                }
            }).then(response => {
                if (response.code === 411) {
                    //创建新的订单
                    axios.get('/order/saveOrder', {
                        params: {
                            userId: userInfo.id,
                            goodId: itemId
                        },
                        headers: {
                            token: token,
                            longtoken: longtoken
                        }
                    }).then(response => {
                        if (response.code === 200) {
                            console.log(response.data);
                            router.push("/paygood/" + goodid);
                        } else {
                        }
                    })
                    router.push("/paygood/" + goodid);
                } else {
                    console.log(response.data);
                    ElMessage.error("您当前已经创建该课程的订单了，请前往我的订单中查看~~");
                }
            })
        }

        return {
            paygood,
            itemId,
            token,
            longtoken,
            reccourselData,
            route,
            router,
        }

    }
}

</script>